import React, { Component } from 'react'
import { goodsDetail } from '../request/detail'
import qs from 'qs'
import "../asserts/css/detail.css"

export default class GoodsDetail extends Component {
    state = {
        goodsDetail: {}
    }
    UNSAFE_componentWillMount() {
        var string_params = qs.parse(this.props.location.search.substr(1))

        goodsDetail(string_params.id).then(res => {
            if (res.code === 200) {
                this.setState({
                    goodsDetail: res.list[0]
                })
            }
        })
    }
    render() {
        const { goodsDetail } = this.state
        return (
            <>
                <div className="warp">
                    <header>
                        <div className="top">
                            <p>{goodsDetail.goodsname}</p>
                        </div>
                        <nav>
                            <ul>
                                <li>商品</li>
                                <li>详情</li>
                                <li>评价</li>
                                <li>推荐</li>
                            </ul>
                        </nav>
                    </header>
                    <div className="big-img">
                        <img src={this.$static_url + goodsDetail.img} alt="" />
                    </div>
                    <div className="out">
                        <div className="detals">
                            <div className="pice">
                                <p>￥<span>{goodsDetail.price}</span>
                                    <span>￥<del>{goodsDetail.market_price}</del></span></p>
                                <div>
                                    <p>收藏</p>
                                </div>
                            </div>
                            <p>{goodsDetail.goodsname}</p>
                            <p>{goodsDetail.description}</p>
                            <p>11.11限时299元起</p>
                            <div>
                                <p>此商品于2020-11-11,00点结束闪购特卖</p>
                                <p>查看</p>
                            </div>
                            <div>
                                <p>【电商热销榜】第1名</p>
                            </div>
                        </div>
                    </div>
                    <div className="select">
                        <div>
                            <p>已选</p>
                            <p>{goodsDetail.goodsname} x 1</p>
                        </div>
                        <div>
                            <p>送至</p>
                            <p>北京市东城区</p>
                        </div>
                        <div className="bottom">
                            <p>U商城自营</p>
                            <p>U商城发货</p>
                            <p>7天无理由退货</p>
                        </div>
                    </div>
                </div>
            </>
        )
    }
}
